﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>记事本</title>
    <link href="../../WF/Portal/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="../../WF/Comm/Gener.js" type="text/javascript"></script>
    <script  src="../../WF/Portal/layui/layui.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <script src="../../WF/Portal/js/vue/vue.js" type="text/javascript"></script>
    <style>
        .note-nav {
        }

        .note-nav h2 {
            border-left: 2px solid #009688;
            display: inline-block;
            padding-left: 10px;
            font-weight: bold;
            font-size: 16px;
            margin-top:15px;
            
        }
        .fr {
            float: right
        }
        .note-list{ margin-top:20px;}
        .note-box {
            border:1px solid #a3e2dc;
            margin: 10px 0px;
            box-shadow: 0px 4px 4px #d4f0ed;
            padding: 11px;
        }
        .note-box:hover {
            border: 2px solid #009688; padding: 10px;
        }
        .note-box > .title {
            line-height: 32px;
        }
        .note-box > .title > .tt { font-size:16px; font-weight:bold}
        .note-box > .title > .tt i{ cursor:pointer; color:#808080}
        .note-box > .nav {
            color: #808080;
            padding: 0px 0px 10px 20px;
        }
        .note-box >.info{ padding:10px 10px 10px 20px; font-size:16px;}
        .nyellow i {
            color: #ffd800 !important
        }
        .editWindows {
            width: 100%;
            height:100%;
            background:rgba(0,0,0,0.6);
            position: fixed;
            top: 0px;
        }
        .editbox{ background:#fff; width:80%; height:60%; padding:0 5%; margin:10% 0 0 5%}
        .editTitle{ line-height:32px; font-weight:bold;border-bottom:1px solid #efefef; margin-bottom:8px;}

    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="note-header">
            <div class="note-nav">
                <h2>记事本</h2>

            </div>
        </div>
        <div class="note-list" id="notelist" @click.stop="Isedit=false">
            <div class="note-box"  v-for="(item,index) in notelist">
                <div class="title">
                    <div class="fr">
                        <span @click.stop="EidtNote(item.MyPK),Isedit=true" class="layui-btn layui-btn-xs">编辑</span>
                        <span @click.stop="Delnote(item.MyPK)" class="layui-btn layui-btn-danger  layui-btn-xs">删除</span>
                    </div>
                    <div :class="item.IsStar ? 'tt nyellow':'tt'" :id="item.MyPK">
                        <i class="layui-icon layui-icon-star-fill"   @click.stop="StarType(item.MyPK)"></i>
                        {{item.Name}}
                    </div>
                </div>
                <div class="nav">
                    <span>{{item.RDT}}</span>
                </div>
                <div class="info">
                    {{item.Docs}}
                </div>
            </div>
            <div class="editWindows" v-if="Isedit" >
                <div class="editbox" @click.stop="Isedit=true">
                    <div class="editTitle">编辑记事本</div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">主题</label>
                        <div class="layui-input-block">
                            <input type="text" name="TB_Name" id="TB_Name" v-model="editdata.Name" autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">正文</label>
                        <div class="layui-input-block">
                            <textarea name="TB_Docs" id="TB_Docs" placeholder="请输入记事内容..." class="layui-textarea">{{editdata.Docs}}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">

                            <input type="checkbox" name="IsStar" id="IsStar" :value="editdata.IsStar" v-model="editdata.IsStar" />{{editdata.star}}星标记事
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span class="layui-btn" @click.stop="editSave(editdata.MyPK);">保存</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#notelist',
            data: {
                notelist: [],//记事 
                Isedit: false,
                editdata: [],
            },

            methods: {             
              
                StarType: function (MyPK) {                 
                    var en = new Entity("BP.CCOA.Notepad", MyPK);
                    en.Retrieve();
                   
                    if (en.IsStar == 0) {
                        $("#" + MyPK).addClass('nyellow')
                        var ens = new Entity("BP.CCOA.Notepad", MyPK);
                        ens.IsStar = 1;                       
                        ens.Update();

                    } else {
                        $("#" + MyPK).removeClass('nyellow')
                        var ens = new Entity("BP.CCOA.Notepad", MyPK);
                        ens.IsStar = 0;
                        ens.Update();
                    }

                    
                },
                Delnote: function (MyPK) {
                    if (confirm('您确定想删除该记事吗?')) {
                        var endel = new Entity('BP.CCOA.Notepad', MyPK);
                        endel.Delete();
                       location.reload();
                    }
                },
                EidtNote: function (MyPK) {
                    var en = new Entity("BP.CCOA.Notepad", MyPK);
                    console.log(en);
                    this.editdata = en;
                    /*var notelisturl = 'form.htm?MyPK='+ MyPK
                    OpenLayuiDialog(notelisturl, "", 400, false, false, true, false);*/
                },
                editSave: function (MyPK) {
                   
                    var IsStar=0
                    if ($('#IsStar').val() == 'true' || $('#IsStar').val() ==1) {
                        IsStar = 1
                    }
                   // console.log(IsStar)
                    var ens = new Entity("BP.CCOA.Notepad", MyPK);
                    ens.IsStar = IsStar;
                    ens.CopyForm();
                    ens.Update();
                    this.Isedit = false
                    var en = new Entities("BP.CCOA.Notepads");
                    en.Retrieve();
                    en = en.TurnToArry();
                    this.notelist = en;
                }
            },
            mounted: function () {
                // fix firefox bug
                document.body.ondrop = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                }

                var en = new Entities("BP.CCOA.Notepads");
                en.Retrieve();
                en = en.TurnToArry();
                console.log(en);
                var noteLately = ''
                var noteStar = ''
                this.notelist = en;

              //  this.noteStar = ensStars;


            }
        })
       
    </script>
</body>
</html>